<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风归于朗月 - 新倩女幽魂</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #000;
            overflow: hidden;
            height: 100vh;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://picsum.photos/id/1025/1920/1080');
            background-size: cover;
            background-position: center;
            filter: brightness(0.7);
            animation: backgroundFlow 60s linear infinite;
        }

        @keyframes backgroundFlow {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
        }

        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .enter-btn {
            position: absolute;
            top: 20px;
            right: 40px;
            padding: 8px 16px;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .enter-btn:hover {
            background-color: rgba(255, 255, 255, 0.4);
            transform: translateY(-2px);
        }

        .center-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
        }

        .main-title {
            font-size: 56px;
            color: #fff;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
            from {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4);
            }
            to {
                text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 105, 180, 0.4);
            }
        }

        .subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
        }

        .buttons-container {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .action-btn {
            padding: 12px 24px;
            font-size: 18px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .download-btn {
            background-color: #d4380d;
            color: #fff;
        }

        .gift-btn {
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .download-btn:hover {
            background-color: #ff4500;
        }

        .gift-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

        .footer {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-title {
                font-size: 40px;
            }

            .subtitle {
                font-size: 16px;
            }

            .buttons-container {
                flex-direction: column;
                align-items: center;
            }

            .action-btn {
                width: 200px;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="background"></div>
        <div class="overlay"></div>

        <div class="logo">新倩女幽魂</div>
        <button class="enter-btn">进入官网</button>

        <div class="center-content">
            <h1 class="main-title">风归于朗月</h1>
            <p class="subtitle">新版本[流水向秦川]现已开启</p>
            <div class="buttons-container">
                <button class="action-btn download-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 21V13M12 13L16 9M12 13L8 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M20 7H4C2.89543 7 2 6.10457 2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5C22 6.10457 21.1046 7 20 7Z" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    PC版下载
                </button>
                <button class="action-btn download-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M17 17H7C5.89543 17 5 16.1046 5 15V9C5 7.89543 5.89543 7 7 7H17C18.1046 7 19 7.89543 19 9V15C19 16.1046 18.1046 17 17 17Z" stroke="currentColor" stroke-width="2"/>
                        <path d="M12 17V22M12 22L16 18M12 22L8 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 7V3M12 3L16 7M12 3L8 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    移动版下载
                </button>
                <button class="action-btn gift-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 6L15.09 9.09L13.67 10.5L12 9L10.33 10.5L8.91 9.09L12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    礼包领取
                </button>
            </div>
        </div>

        <div class="footer">
            <p>版权所有 © 2023 新倩女幽魂</p>
        </div>
    </div>

    <script>
        // 简单的交互效果
        document.querySelector('.enter-btn').addEventListener('click', function() {
            alert('即将进入官网');
        });

        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                alert(this.textContent.trim() + ' 功能已触发');
            });
        });
    </script>
</body>
</html>